WebGL

使用

<canvas id='canvas'></canvas>
<script type='glsl' id='vertex'>
    // ...  glsl 执行代码
</script>
<script>
    const oCanvas = document.getElementById('canvas');
    let gl = oCanvas.getContext('webgl');
    if (!gl) {
        alert('浏览器不支持 webgl');
    }
</script>

着色器语言

• 顶点着色器：用来描述顶点特征的程序
• 片元着色器：进行逐片元处理过程，如光照的程序

变量声明——存储限定符

• attribute： 传输的是与顶点有关的数据
• uniform： 传输的是对于所有顶点都相关的（或与顶点无关）的数据（全局变量）
• textures： 纹理（纹理是一个数据序列，可以在着色程序运行中随意读取其中的数据。大多数情况存放的是图像数据，但是纹理仅仅是数据序列，也可以存放除颜色外的数据）
• varying： 可变变量（是一种顶点着色器给片元着色器传值的方式，依照渲染的图元是点，线还是三角形，顶点着色器中设置的可变变量会在片段着色器运行中获取不同的插值）

数据类型

• 矢量：
  • vec2，vec3，vec4：浮点数元素的矢量
  • ivce2，ivce3，ivce4： 整型元素的矢量
  • bvce2，bvc,3，bvce：布尔元素的矢量
• 矩阵： mat2，mat3，mat4：浮点数的矩阵（2²，3²，4²）

<canvas id='canvas'></canvas>
<script type='glsl' id='vertex'>
    void main () {
        gl_Position = vec4(0, 0, 0, 0);
        gl_PointSize = 10.0;
    }
</script>
<script type='glsl' id='fragment'>
    void main () {
        gl_FragColor = vec4(0, 0, 0, 1);
    }
</script>
<script>
    const oCanvas = document.getElementById('canvas');
    let gl = oCanvas.getContext('webgl');
    if (!gl) {
        alert('浏览器不支持 webgl');
    }
    
    // 创建着色器函数
    function createShader (gl, type, source) {
        const shader = gl.createShader(type);  // 创建着色器  type: gl.VERTEX_SHADER | gl.FRAGMENT_SHADER
        gl.shaderSource(shader, source);  // 向着色器中添加颜色
        gl.compileShader(shader);  // 编译着色器代码
           const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
        if (success) {  // 编译成功
            return shader;
        }
        console.log(gl.getShaderInfoLog(shader));
    }
    
    const vertexStr = document.getElementById('vertex').innerText;
    const fragmentStr = document.getElementById('fragment').innerText;
    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexStr);
    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentStr);
    
    // 创建程序函数
    function createProgram (gl, vertexShader, fragmentShader) {
        const program = gl.createProgram();  // 创建程序
        gl.attachShader(program, vertexShader);  // 绑定着色器程序
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);  // 连接着色器程序
        return program;
    }
    
    const program = createProgram(gl, vertexShader, fragmentShader);
    gl.useProgram(program);
    
    gl.clearColor(0, 0, 1, 1);  // 清空画布颜色
    gl.clear(gl.COLOR_BUFFER_BIT);  // 清空颜色缓冲区
    
    gl.drawArrays(gl.POINTS, 0, 1);
</script>